<template>
    <div class="conant">
        <el-form label-width="120px">
            <el-form-item label="品牌名称">
                <el-input v-model="addMenu.name" type="text" />
            </el-form-item>
            <el-form-item label="品牌首字母">
                <el-input v-model="addMenu.firstLetter" type="text" />
            </el-form-item>
            <el-form-item label="品牌LOGO">
                <el-upload v-model:file-list="fileList" class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview"
                    :on-remove="handleRemove" list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌专区大图">
                <el-upload v-model:file-list="fileList2" class="upload-demo"
                    action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :on-preview="handlePreview2"
                    :on-remove="handleRemove2" list-type="picture">
                    <el-button type="primary">点击上传</el-button>
                    <template #tip>
                        <div class="el-upload__tip">
                            只能上传jpg/png文件，且不超过100kb
                        </div>
                    </template>
                </el-upload>
            </el-form-item>
            <el-form-item label="品牌故事">
                <el-input v-model="addMenu.brandStory" type="text" />
            </el-form-item>
            <el-form-item label="排序">
                <el-input v-model="addMenu.sort" type="text" placeholder="请输入角色描述" />
            </el-form-item>
            <el-form-item label="是否显示">
                <el-radio-group v-model="addMenu.showStatus" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="2" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="品牌制造商">
                <el-radio-group v-model="addMenu.factoryStatus" class="ml-4">
                    <el-radio :label="1" size="large">是</el-radio>
                    <el-radio :label="0" size="large">否</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item>
                <el-button v-if="route.id ? true : false" @click="pmsBrandParam(addMenu)">提交</el-button>
                <div v-else>
                    <el-button type="primary" @click="addpmsBrandParam(addMenu)">提交</el-button>
                    <el-button @click="pmsBrandParam(addMenu)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { UploadProps, UploadUserFile } from 'element-plus'
import { useRoute, useRouter } from "vue-router"
import useTable from '../../hooks/useTables'
import * as api from '../../request/api'
import { IProductCategory } from '../../request/PmsAdminConreiller/index'
import { add } from 'lodash'
const router = useRouter()
const route: any = useRoute().query
console.log(route);

const value = ref('')
//下拉框
const options = [
    {
        value: 'Option1',
        label: 'Option1',
    },
    {
        value: 'Option2',
        label: 'Option2',
    },
    {
        value: 'Option3',
        label: 'Option3',
    },
    {
        value: 'Option4',
        label: 'Option4',
    },
    {
        value: 'Option5',
        label: 'Option5',
    },
]
//请求
const addMenusfrom = ref({}) as Ref<IProductCategory>
const addMenu = ref({}) as Ref<IProductCategory>
if (!route.id) {
    addMenu.value = addMenusfrom.value
} else if (route) {
    const change = async () => {
        const res = await api.product.getbrandEditor(route.id)
        addMenu.value = res
        // fileList.value = res.bigPic
        console.log(res);
    }
    change()
}
//上传
const fileList = ref<UploadUserFile[]>([])


const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePreview: UploadProps['onPreview'] = (file) => {
    console.log(file)
}

const fileList2 = ref<UploadUserFile[]>([

])

const handleRemove2: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    console.log(uploadFile, uploadFiles)
}

const handlePreview2: UploadProps['onPreview'] = (file) => {
    console.log(file)
}

//提交
const pmsBrandParam = (val: IProductCategory) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否提交数据', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求删除
            await api.product.postbrandModification(val)
            ElMessage({
                type: 'success',
                message: '修改成功',
            })
            router.push('/pms/brand')
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
//添加
const addpmsBrandParam = (val: IProductCategory) => {
    // 二次 确认 
    ElMessageBox.confirm(
        '是否提交数据', "提示",
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            // 发请求删除
            await api.product.postaddBrand({
                pmsBrand: val
            })
            ElMessage({
                type: 'success',
                message: '提交成功',
            })
            router.push('/pms/brand')
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '取消删除',
            })
        })
}
</script>

<style lang="scss" scoped>
.conant {
    width: 850px;
    // height: 100vh;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    margin: 60px auto;
    padding: 40px;

    .el-form-item {
        :deep .el-form-item__label {
            width: 150px;
        }

        :deep .el-input {
            width: 530px;
            height: 50px;
            padding-left: 10px;
        }
    }

    .is-success {
        width: 530px;
    }

}
</style>